<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" @click="add">新增</el-button>
                </div>
            </template>

            <template #form>

                <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">
                    <el-form-item prop="years" label-width="60px">
                        <el-input v-model="formInline.years" placeholder="请输入年度" clearable />
                    </el-form-item>
                    <el-form-item prop="templateName">
                        <el-input v-model="formInline.templateName" placeholder="请输入名称" clearable />
                    </el-form-item>
                    <el-form-item prop="enabled">
                        <el-select v-model="formInline.enabled" clearable placeholder="请选择状态">
                            <el-option v-for="item in STATUS_LIST" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </SearchForm>
            </template>
            <template #table="tableScope">
              <PubilcTable :table-data="tableData" :isSlot="false" :tableHeight="tableScope.tableHeight" :list-config="TEMPLATE_CONFIG" :page-data="pageData"
                @on-action="onAction" :translateTextDeal="translateTextDeal" :actionLimitName="actionLimitName" :tableLoading="tableLoading"/>
            </template>
        </page-view>
    </div>
</template>
<script  setup name="Standard">
import { reactive } from 'vue'
import { TEMPLATE_CONFIG, STATUS_LIST, TIME_WEEK_LIST, WEEK_LIST } from './Common/config'
import { statusText } from '@/util/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import { useRouter } from 'vue-router'
const router = useRouter()
const formInline = ref({
    templateName: '',
    enabled: ''
})
const pageData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const tableData = ref([])

const type = ref('add')

const tableLoading = ref(false)

onMounted(() => {
    getList()
})
const onSearch = () => {
    pageData.value.pageNum = 1
    getList()
}

// 获取列表数据
const getList = () => {
  tableLoading.value = true
    const parms = {
        ...pageData.value,
        ...formInline.value
    }
    api.budgetConfig.budgetTemplateList(parms).then(res => {
        const { list, total } = res
        pageData.value.total = total
        tableData.value = list
        setTimeout(()=>{
          tableLoading.value = false
        },500)

    })

}
const lookRow = (row) => {
    router.push({
        name: 'budgetTemplateLook',
        query: {
            type: 'look',
            id: row.id
        }
    })

}

const editRow = (row) => {
    router.push({
        name: 'budgetTemplateEdit',
        query: {
            type: 'edit',
            id: row.id
        }
    })

}

const copyRow = (row) => {
    router.push({
        name: 'budgetTemplateAdd',
        query: {
            type: 'copy',
            id: row.id
        }
    })

}
const delRow = (row) => {
    ElMessageBox.confirm(
        '您确定要进行删除操作吗?',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            api.budgetConfig.budgetTemplateDelete({ id: row.id }).then(res => {
                onSearch()
                ElMessage.success('操作成功')
            })
        })
}
const updateStatus = (row) => {
    let text = row.enabled ? '停用' : '启用'
    ElMessageBox.confirm(
        `您确定要进行${text}操作吗?`,
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            api.budgetConfig.budgetTemplateUpdateStatus({ state: row.enabled ? "disable" : "enable", id: row.id }).then(res => {
                onSearch()
                ElMessage.success('操作成功')
            })
        })
}
// 列表操作 分页
const onAction = ([item, row]) => {
    const obj = {
        'look': lookRow,
        'del': delRow,
        'edit': editRow,
        'enabled': updateStatus,
        'copy': copyRow,
        'pageNum': getList,
        'pageSize': onSearch
    }
    if (typeof item === 'string') {
        pageData.value[item] = row
        obj[item]()
    } else {
        obj[item.alias](row)
    }
}
// 显示新增弹框
const add = () => {
    router.push({
        name: 'budgetTemplateAdd',
        query: {
            type: 'add'
        }
    })
}
// 操作按钮名称调整
const actionLimitName = ([row, filed]) => {
    const info = { ...filed }
    if (filed.alias === "enabled") {
        filed['label'] = row.enabled ? '停用' : '启用'
    }

    return filed.label
}
const translateTextDeal = (item, val) => {
    let text = ''
    if (item.alias == "enabled") text = statusText(STATUS_LIST, val)
    if (item.alias == 'cycleType') {
        let cycleTypeList = [...TIME_WEEK_LIST, ...WEEK_LIST]
        text = statusText(cycleTypeList, val)
    }
    return text

}

onActivated(() => {
    getList()

})
</script>
